<div class="asset-listgrid-container" th:attr="data-collectionname=${listGrid.subCollectionFieldName}">

    <div class="asset-ribbon">
        <div class="asset-title-container">
            <span th:unless="${#strings.isEmpty(listGrid.friendlyName)}" th:classappend="${listGrid.hideFriendlyName} ? hidden : ''" class="asset-title" th:utext="#{${listGrid.friendlyName}}"></span>

            <!-- Asset Ribbon Actions -->
            <div class="asset-title-actions">

                <!-- Asset Functions -->
                <a th:each="action,iterStat : ${listGrid.activeToolbarActions}"
                   class="button primary"
                   th:href="@{'/' + ${sectionKey + action.urlPostfix}}"
                   th:classappend="${action.buttonClass}"
                   th:attr="data-actionurl=@{${#strings.isEmpty(action.actionUrlOverride) ? (listGrid.path + action.urlPostfix) : action.actionUrlOverride} + ${listGrid.sectionCrumbRepresentation}},
                             data-urlpostfix=${action.urlPostfix},
                             data-queryparams=${listGrid.sectionCrumbRepresentation},
                             disabled=${action.actionId == 'SPLIT'} ? 'disabled'">
                    <th:block th:text="#{${action.displayText}}"></th:block>
                </a>
                <div class="asset-title-divider"></div>

                <!-- Grid Functions -->
                <a class="asset-image-view active" href="#"><i class="fa fa-th"></i></a>
                <a class="asset-list-view" href="#"><i class="fa fa-list"></i></a>
            </div>
        </div>
    </div>

    <div class="select-group">
        <div class="asset-grid">
            <div class="asset-grid-container"
                 th:attr="data-recordranges=${listGrid.startIndex + '-' + (listGrid.startIndex + #lists.size(listGrid.records) - 1)},
                        data-totalrecords=${listGrid.totalRecords},
                        data-pagesize=${listGrid.pageSize}">
                <div th:each="asset : ${listGrid.records}" class="asset-item">

                    <div class="image-wrapper">
                        <img class="thumbnail"
                             blc:src="@{${asset.getField('media.url').getValue() + '?largeAdminThumbnail'}}"
                             th:attr="data-fullurl=@{${asset.getField('media.url').getValue()}},
                             data-rowid=${asset.id},
                             data-link=@{${asset.path}},
                             data-index=${asset.index},
                             data-hiddenfields=${asset.getHiddenFieldsJson()}" />

                        <div class="asset-actions">
                            <th:block th:each="action : ${listGrid.activeRowActions}">
                                <a href="#"
                                   th:if="#{${action.displayText}} == 'Delete'"
                                   class="media-grid-remove"
                                   th:attr="data-urlpostfix=${action.urlPostfix},
                                     data-actionurl=@{${#strings.isEmpty(action.actionUrlOverride) ? (listGrid.path + action.urlPostfix) : action.actionUrlOverride} + ${listGrid.sectionCrumbRepresentation}},
                                     data-queryparams=${listGrid.sectionCrumbRepresentation}"
                                   th:title="#{${action.displayText}}">
                                    <i class="fa fa-close"></i>
                                </a>
                            </th:block>
                        </div>
                    </div>

                    <!-- Title and Key links -->
                     <th:block th:each="action : ${listGrid.activeRowActions}" th:if="#{${action.displayText}} == 'Edit'">
                        <a href="#"
                           class="media-link"
                           th:attr="data-urlpostfix=${action.urlPostfix},
                             data-actionurl=@{${#strings.isEmpty(action.actionUrlOverride) ? (listGrid.path + action.urlPostfix) : action.actionUrlOverride} + ${listGrid.sectionCrumbRepresentation}},
                             data-queryparams=${listGrid.sectionCrumbRepresentation},
                             data-link=@{${asset.path}}"
                           th:title="#{${action.displayText}}" th:text="${asset.getField('media.title').getValue()}">
                        </a>
                         <a href="#"
                            class="media-link media-key"
                            th:attr="data-urlpostfix=${action.urlPostfix},
                             data-actionurl=@{${#strings.isEmpty(action.actionUrlOverride) ? (listGrid.path + action.urlPostfix) : action.actionUrlOverride} + ${listGrid.sectionCrumbRepresentation}},
                             data-queryparams=${listGrid.sectionCrumbRepresentation},
                             data-link=@{${asset.path}}"
                            th:title="#{${action.displayText}}"
                            th:text="${'key: ' + asset.getField('key').getValue()}">
                         </a>
                    </th:block>
                </div>
            </div>
        </div>
        <div class="asset-listgrid-wrapper" style="display: none;">
            <div class="asset-listgrid listgrid-container"  th:include="components/mediaListGrid" th:with="listGrid=${listGrid}"></div>
        </div>
    </div>
</div>


